<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物超市</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css"
          href="../static/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css"
          href="../static/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <style>

        div{
            display: block;
        }
        body{
            padding-top: 20px;
            position: relative;
            color: #d73e22;
        }
        img{
            transition-duration: 1s;/*设置动画时间*/
        }
        img:hover{
            transform: scale(1.2);/*鼠标在图片上悬停缩放1.2倍*/
        }

        .zong{
            width: 1353px;
            position: relative;
            display: block;
            margin: 0 auto;
            padding: 0;

        }
        .zong_1{
            width: 1300px;
            display: block;
            position: relative;
            margin: 0 auto;
            padding: 0;
            left: -20px;
        }

        /*header头部部分css*/
        .navbar-brand>img{
            position: relative;
            top:-12px;
        }
        /*搜索框样式*/
        #search>input{
            border: none;
            height: 30px;
            border-radius: 30px;
            color: #A9A8A8;
            padding: 10px 20px;
            position: relative;
            top: 10px;
            left: 40px;
            width: 250px;
            outline: none;/*去掉点击后的边框*/
        }
        /*搜索按钮 放大镜样式*/
        #search>button{
            background-color: rgba(0,0,0,0);
            border: none;
            color: gray;
            position: relative;
            top: 12px;
            left: 5px;
        }
        .nav.navbar-nav>li>a{
            color: #4e4848;
            font-size: 17px;
            position: relative;
            padding: 15px 10px;
        }

        .nav.navbar-nav>li>a:hover{
            color: #ff0000;
        }

        /*section(主体)部分css*/
        .bg_col img{
            width: 16px;
            height: 16px;
            position: relative;
            top: -2px;
            padding: 0;
            margin: 0;
        }
        .bg_col dl{
            width: 185px;
        }
        .bg_col dd{
            margin-top: 5px;
            margin-left: 20px;
        }
        .bg_col a{
            margin: 0px auto;
        }

        /*中间栅格*/
        .im img{
            transition-duration: 1s;/*设置动画时间*/
            max-width: 100%;
            min-height: 373px;
        }
        .im_a img{
            width: 190px;
        }

        /*好货精品部分*/
        .tit_h_1 i{
            width: 4px;
            min-width: 4px;
            height: 20px;
            display: block;
            margin: 3px 10px 0 0;
            padding: 0;
            background: linear-gradient(285deg,rgba(254,46,84,1) 0,rgba(255,119,119,1) 100%);
            float: left;
        }
        .tit_h_1 b{
            font-size: 20px;
            position: relative;
            display: block;
            padding: 0;
            margin: 7px auto;
            color: rgba(85,85,85,1);
        }
        .tit_h_2 i{
            width: 24px;
            height: 24px;
            color: white;
            display: inline-block;
            text-align: center;
            line-height: 24px;
            background: #ff6f00;
            border-radius: 50%;
            margin: 0 5px;
        }
        .tit_h_3 span{
            position: relative;
            padding: 0;
            margin: 12px 32px;
            display: inline-block;
            left: 10px;
        }
        .tit_h_3 span:hover{
            cursor: pointer;
        }
        .tit_h_3 a{
            position: relative;
            padding: 0;
            margin: 12px 10px 0 10px;
        }
        .list img{
            width: 120px;
            height: 120px;
            border-radius: 5px;
            float: left;
            margin: 10px 0;
        }

        .list_content p{
            color: rgba(102,102,102,1);
            line-height: 19px;
            margin: 10px 0 12px;
            height: 20px;
            overflow: hidden;
        }

        .list_icon span{
            background: rgba(255,243,243,1);
            border-radius: 2px;
            border: 1px solid rgba(255,197,199,1);
            color: #FF0100;
            font-size: 12px;
            padding: 2px 6px;
            float: left;
            max-width: 150px;
            margin-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .list_icon i{
            background: linear-gradient(90deg,rgba(194,76,255,1) 0,rgba(255,86,134,1) 100%);
            border-radius: 1px;
            color: #fff;
            font-size: 12px;
            padding: 2px 15px;
            margin: 1px 0 0 5px;
            display: inline-block;
        }
        .list_price b{
            color: #9a9a9a;
            border-top: 1px solid #9a9a9a;
            line-height: 0;
            height: 0;
            font-size: 12px;
            display: inline-block;
            font-weight: 400;
            margin-left: 10px;
        }
        .haohuo_img img{
            width: 100%;
            height: 210px;
        }

        .haohuo_brief p{
            color: #494949;
            line-height: 18px;
            height: 18px;
            margin: 11px 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        .haohuo_brief_middle{
            color: #262626;
            height: 50px;
            display: block;
            padding: 10px;
            margin: 20px auto;
        }
        .haohuo_brief_middle_1{
            display: block;
            float: left;
            font-size: 20px;
        }
        .haohuo_brief_middle_2{
            display: block;
            float: right;
            font-size: 20px;
        }
        .haohuo_price{
            color: #fc4d52;
            font-size: 25px;
            height: 50px;
            line-height: 50px;
            margin: 20px auto;
            padding: 0px;
        }
        .biaoti{
            height: 50px;
            margin: 10px auto;
            padding: 10px;
            font-size: 25px;
        }
        .haohuo_price span{
            font-size: 25px;
            font-weight: 700;
        }
        .haohuo_price b{
            line-height: 14px;
            background-size: 100% 100%;
            font-size: 12px;
            border-radius: 2px;
            font-weight: 400;
            padding: 2px 7px;
            margin: 9px 0;
            position: relative;
            min-width: 57px;
            text-align: center;
            box-sizing: border-box;
            height: 19px;
            float: right;
        }
        .haohuo_price i{
            font-size: 15px;
            margin: 0 2px 0 0;
            position: relative;
            top: 1px;
        }

        /*底部分页部分*/
        .nav_fy a{
            border-radius: 2px;
            box-shadow: none;
            font-weight: 400;
            margin: 0 auto;
        }


        h3{
            color: #e73f0a;
            position: absolute;
            left: 43%;
            top: -7px;
        }
        .row_left{
            position: relative;
            margin: 40px;
            width: 400px;
            height: 400px;
        }
        .row_right{
            position: relative;
            margin: 40px;
            width: 400px;
            height: 400px;
        }
        .row_right_1{
            position: relative;
            top: 85px;
        }
        .images{
            width: 400px;
            height: 400px;
        }


    </style>
</head>
<body>

<div class="zong">
    <div class="zong_1">
        <!--主体部分-->
        <section>
            <div class="section_z">
                <div class="container" style="min-width: 1320px;margin: 0">
                    <div class="tit">
                        <div class="panel panel-default">
                            <!--导航开始-->
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-3">
                                        <p class="tit_h_1">
                                            <i></i>
                                            <b>商品详情</b>
                                        </p>
                                    </div>
                                    <div class="col-md-6"></div>
                                    <div class="col-md-3">
                                        <div class="tit_h_3">
                                            <a href="http://localhost:8080/sIndex"><span class="add pull-right">返回首页</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--导航结束-->
                            <!--内容开始-->
                            <div class="panel-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-4 row_left">
                                            <img class="images" th:src="${goodsUser.imgurl}">
                                        </div>
                                        <div class="col-md-8 row_right">
                                            <div class="row_right_1">
                                                <p class="biaoti">
                                                    <span th:text="${goodsUser.name}">孙悟空</span>
                                                </p>
                                                <div class="haohuo_brief_middle">
                                                    <span class="haohuo_brief_middle_1">库存<b th:text="${goodsUser.sum}">100</b></span>
                                                    <span class="haohuo_brief_middle_2">销量<b th:text="${goodsUser.salesum}">0</b></span>
                                                </div>
                                                <div class="haohuo_price">￥
                                                    <span th:text="${goodsUser.price}">13888</span>
                                                    <span class="pull-right"><a th:href="'http://localhost:8080/changeGoods?id='+${goodsUser.id}" class="btn btn-danger" style="font-size: 25px">修改商品信息</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--内容结束-->
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
</body>
<script type="text/javascript" src="../static/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript" src="../static/js/vue.js"></script>
<script>

</script>
</html>